<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.areaConvert.valueTitle')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-container>
      <el-aside width="200px">
        <el-scrollbar wrap-style="height:calc(100vh - 175px);">
          <el-tree
            ref="treeEl"
            style="max-width: 600px"
            node-key="id"
            :props="treeProps"
            :load="loadNode"
            :expand-on-click-node="false"
            lazy
            @node-click="clickTreeNode"
          >
            <template #default="{ node }">
              <Icon icon="ph:map-pin-area-fill" color="#CC0000" hoverColor="#CC0000" />
              <span class="ml-1">{{ node.label }}</span>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-aside>
      <WsmTable
        ref="table"
        load-url="/dbms-server/base/areamapping/page"
        :change-load="true"
        v-model="queryFormType"
      >
        <template #title>{{ title }}</template>
        <template #button="{ row }">
          <el-button
            type="primary"
            v-if="initData.areaId"
            v-hasPermi="'addValue'"
            @click="addForm.show()"
            >{{ t('common.add') }}</el-button
          >
          <template v-if="row">
            <el-button v-hasPermi="'updateValue'" @click="update(row.id)" type="primary">{{
              t('common.update')
            }}</el-button>
            <el-button v-hasPermi="'deleteValue'" @click="del(row.id)" type="danger">{{
              t('common.delete')
            }}</el-button>
          </template>
        </template>
        <template #column>
          <el-table-column
            prop="areaId"
            :label="t('dbms.areaConvert.confiValue.areaId')"
            width="180"
          />
          <el-table-column prop="areaName" :label="t('dbms.areaConvert.confiValue.areaName')" />
          <el-table-column
            prop="mappingCode"
            :label="t('dbms.areaConvert.confiValue.mappingCode')"
            width="100"
          />
          <el-table-column
            prop="mappingName"
            :label="t('dbms.areaConvert.confiValue.mappingName')"
          />
        </template>
      </WsmTable>
    </el-container>

    <WsmForm
      ref="addForm"
      v-model="addData"
      submit-url="/dbms-server/base/areamapping/add"
      label-width="110px"
      :init-data="initData"
      :title="t('dbms.areaConvert.addValueTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="mappingCode" :label="t('dbms.areaConvert.confiValue.mappingCode')">
              <el-input
                v-model="form.mappingCode"
                :placeholder="t('dbms.areaConvert.confiValue.mappingCode')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="areaName" :label="t('dbms.areaConvert.confiValue.areaName')">
              <el-input
                v-model="form.areaName"
                :placeholder="t('dbms.areaConvert.confiValue.areaName')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mappingName" :label="t('dbms.areaConvert.confiValue.mappingName')">
              <el-input
                v-model="form.mappingName"
                :placeholder="t('dbms.areaConvert.confiValue.mappingName')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>

    <WsmForm
      ref="updateForm"
      v-model="updateData"
      load-url="/dbms-server/base/areamapping/get"
      label-width="110px"
      submit-url="/dbms-server/base/areamapping/update"
      :title="t('dbms.areaConvert.updateValueTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="mappingCode" :label="t('dbms.areaConvert.confiValue.mappingCode')">
              <el-input
                v-model="form.mappingCode"
                :placeholder="t('dbms.areaConvert.confiValue.mappingCode')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="areaName" :label="t('dbms.areaConvert.confiValue.areaName')">
              <el-input
                v-model="form.areaName"
                :placeholder="t('dbms.areaConvert.confiValue.areaName')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mappingName" :label="t('dbms.areaConvert.confiValue.mappingName')">
              <el-input
                v-model="form.mappingName"
                :placeholder="t('dbms.areaConvert.confiValue.mappingName')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType } from '@/components/WsmTable/src/types'
import { getTreeChildApi } from '@/api/dbms/areamanager'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { ElMessageBox, ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { delApi } from '@/api/dbms/areamapping'

const centerDialogVisible = ref<boolean>(false)

const { t } = useI18n()

const title = ref('')
//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData: FormDataType = ref({
  areaId: '',
  code: ''
})
const addData: FormDataType = {
  areaId: '',
  code: '',
  areaName: '',
  mappingCode: '',
  mappingName: ''
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  code: '',
  areaId: '',
  areaName: '',
  mappingCode: '',
  mappingName: ''
}

//查询定义
const queryFormType: QueryFormType = {
  code: {
    value: 'root',
    clear: false
  },
  areaId: {
    value: 'root',
    clear: false
  }
}

//树配置项
const treeProps = {
  label: 'name',
  isLeaf: 'isLeaf'
}

const treeEl = ref<InstanceType<typeof ElTree>>()

//加载树代码
const loadNode = async (node: Node, resolve: (data: []) => void) => {
  if (node.level == 0) {
    const rs = await getTreeChildApi('root')
    if (rs.success) {
      return resolve(rs.data)
    }
  }
  const rs = await getTreeChildApi(node.data.id)
  if (rs.success) {
    return resolve(rs.data)
  }
}

//树的点击事件
const clickTreeNode = (data) => {
  title.value = data.address + '(' + data.id + ')'
  initData.value.areaId = data.id
  queryFormType.areaId.value = data.id
  table.value.load(1)
}

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const flushed = () => {
  table.value.load(1)
}

const show = (c: string) => {
  initData.value.code = c
  queryFormType.code.value = c
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

//暴露方法
defineExpose({ show, hide })
</script>

<style scoped></style>
